<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Demo Window Document</title>
	<script src="js/jquery-1.7.1.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
    
    
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <link href="myStyles/myCSS.css" rel="stylesheet" />
</head>

<body onload="exec()">
	<div id="example" class="k-content">
            <div id="window">
            	<input id="key" type="text" value="" onkeyup="ValidateAlpha()"/>
                <input type="button" onclick="showme()" value="Click me!"/>
            	<div id="grid"></div>                
                <p>Vo Thai Son</p>
            </div>

            <span id="undo" style="display:none" class="k-button">Click here to open the window.</span>

            <script>
			
				var theGrid;
				var data = new kendo.data.DataSource({
					 	transport:{
								read: "data/dinhmuc.php"	
															
							},	
							//MSCV;TPHP;DVT;TENCV;KL;MATINH;STT					
						schema: {
								data: "data",
								model: {
									
									fields: {									
										MSCV: { type: "string" },
										TPHP: { type: "string" },
										DVT: { type: "string" },
										TENCV: { type: "string" },
										KL: { type: "string" },
										MATINH: { type: "string" },
										STT: { type: "string" },	
									}
								}								
							},
						serverFiltering: false,
						//filter:[{ field: "MSCV", operator: "contains", value: "12" }]
				});
				
				function ValidateAlpha()
				{
					var keyCode = window.event.keyCode;
					if ((keyCode >= 48 && keyCode <= 90) || (keyCode >= 116 && keyCode <=111) || (keyCode >= 186 && keyCode<=192) || (keyCode >= 219 && keyCode<=222))
					{
						
						//alert(keyCode + "true");
						showme();
					}
					else
					{
						//alert(keyCode + "false");
						//
						window.event.returnValue = false;
					}
					
				}
				function showme()
				{
					
					key = document.getElementById("key").value;
					//alert(key);	
					
					data = new kendo.data.DataSource({
					 	transport:{
								read: "data/dinhmuc.php"	
															
							},	
							//MSCV;TPHP;DVT;TENCV;KL;MATINH;STT					
						schema: {
								data: "data",
								model: {
									
									fields: {									
										MSCV: { type: "string" },
										TPHP: { type: "string" },
										DVT: { type: "string" },
										TENCV: { type: "string" },
										KL: { type: "string" },
										MATINH: { type: "string" },
										STT: { type: "string" },	
									}
								}								
							},
						serverFiltering: false,
						filter:[{ field: "MSCV", operator: "contains", value: key }]
				});
				exec();
					//dataSource.filter({ field: "MSCV", operator: "eq", value: "AA.11111" });
					//data.fetch();
					//exec();
					//theGrid.refresh();
					//alert("done");
				}
				
				
				function exec()
				{
				$(function()
				{
					 theGrid = $("#grid").kendoGrid({
						selectable: "row",
						dataSource: data,
						filterable: true,
                        columnMenu: true,
						resizable: true,
						/*{
							
							transport:{
								read: "data/dinhmuc.php"	
															
							},	
							//MSCV;TPHP;DVT;TENCV;KL;MATINH;STT					
							schema: {
								data: "data",
								model: {
									id: "MSCV",
									fields: {
										EmployeeID: { editable: false},
										FirstName: { editable: false},
										LastName: { 
											editable: true											
										}
											
									}
								}								
							},
							
							filter: { field: "MSCV", operator: "endswith", value: "1" }
							
						},	*/					
						columns: [
							{field: "MSCV", width: 70},
							{field: "TPHP", width: 150}, 
							{field: "DVT", width: 40},
							{field: "TENCV", width: 320},
							{field: "KL", width: 40},
							{field: "MATINH", width: 50},
							{field: "STT", width: 30}
						],
						
					});	
				}
				
			);
			
				}
			</script>
            <script>
                $(document).ready(function() {
                    var window = $("#window"),
                        undo = $("#undo")
                                .bind("click", function() {
                                    window.data("kendoWindow").open();
                                    undo.hide();
                                });

                    var onClose = function() {
                        undo.show();
                    }

                    if (!window.data("kendoWindow")) {
                        window.kendoWindow({
                            width: "100%",
                            title: "Window by Vo Thai Son",
                            close: onClose
                        });
                    }
                });
            </script>

            <style scoped="scoped">

                #example 
                {
                    min-height:500px;
                }

                #undo {
                    text-align: center;
                    position: absolute;
                    white-space: nowrap;
                    padding: 1em;
                    cursor: pointer;
                }
                .armchair {
                	float: left;
                	margin: 30px 30px 120px 30px;
                	text-align: center;
                }
                .armchair img {
                    display: block;
                    margin-bottom: 10px;
                }
            </style>
        </div>
</body>
</html>
